<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  /*.weui-panel {*/
  /*  background: #eee;*/
  /*}*/
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
    background: #eee;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  /*.weui-panel.weui-panel_access {*/
  /*  padding-bottom: 10px;*/
  /*}*/
  /*.weui-panel__bd:not(.base) {*/
  /*  width: 98%;*/
  /*  padding: 0 1% 2px 1%;*/
  /*}*/
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
  .weui-cell_select {
    padding: 0 15px;
  }
  .charts {
    background: #eee;
    padding: 3px;
    padding-top: 0;
    position: relative;
  }
  .mark {
    position: absolute;
    width: auto;
    height: 15px;
    bottom: 5px;
    left: 10px;
    padding: 10px;
    border-radius: 50%;
    font-size: 12px;
  }
  .mark2 {
    position: absolute;
    max-width: 36%;
    height: 15px;
    top: 5px;
    right: 10px;
    padding: 10px;
    border-radius: 50%;
    font-size: 12px;
    z-index: 1000;
  }
  .mark span {
    padding-right: 5px;
  }
  .switchbtn img {
    width: 15px;
  }
  .weui-grids {
    background: #fff;
  }
  .weui-grids.sec {
    margin-top: 3px;
  }
  .weui-grid {
    width: 15%;
    padding: 10px 5px;
  }
  .weui-grids.sec .weui-grid {
    width: 20%;
    padding: 10px 5px;
  }
  .weui-grid.tit {
    width: 40%;
  }
  .weui-grids.sec .weui-grid.tit {
    width: 30%;
  }
  .weui-grid__label {
    overflow: auto;
    text-overflow: initial;
  }
  input.time {
    border: none;
    font-size: 16px;
    width: 26%;
    padding: 0 3%;
    text-align: center;
  }
  .weui-cell {
    padding: 5px 15px;
    margin-bottom: 5px;
    background: #fff;
  }
  .weui-cell:before {
    border-top: none;
  }
  .weui-select {
    width: 28%;
    height: auto;
    line-height: normal;
  }
  .fixbar {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 5px 10px;
    text-align: center;
    color: red;
    font-size: 20px;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
  }
  .total {
    color: red;
    font-size: 16px;
  }
  .weui-grid {
    width: 50%;
  }
  .mark3 {
    position: absolute;
    max-width: 36%;
    top: 5px;
    right: 10px;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1000;
    border: 1px solid #777;
    background: #eee;
    color: #333;
  }
  .rj-bd-tit {
    width: 30%;
    display: inline-block;
    text-align: center;
    padding: 1%;
  }
</style>
<template>
  <div>
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      生产日报
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <!--      <div class="weui-cell">-->
      <!--&lt;!&ndash;        <div class="weui-cell__hd">&ndash;&gt;-->
      <!--&lt;!&ndash;          <label class="weui-label">起止日期：</label>&ndash;&gt;-->
      <!--&lt;!&ndash;        </div>&ndash;&gt;-->
      <div class="weui-cell__bd">
        <p class="rj-bd-tit">{{room}}</p>
        <p class="rj-bd-tit">{{depart}}</p>
        <p class="rj-bd-tit">{{plandate}}</p>
        <!--          <span>-</span>-->
        <!--          <input type="text" id='datetime-picker2' class="time" name="enddate" placeholder="请选择结束日期" />-->
      </div>
      <!--      </div>-->
      <!--      <div class="weui-cell">-->
      <!--        <div class="weui-cell__hd"><label class="weui-label">开始日期</label></div>-->
      <!--        <div class="weui-cell__bd">-->
      <!--          -->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="weui-cell">-->
      <!--        <div class="weui-cell__hd"><label class="weui-label">结束日期</label></div>-->
      <!--        <div class="weui-cell__bd">-->
      <!--          -->
      <!--        </div>-->
      <!--      </div>-->
      <div class="charts" style="padding: 0 0 3px 0;" v-if="showChart">
        <div class="weui-grids">
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              成本
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              收入
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              原料：{{profit.yclAmount}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              成品：{{profit.ccpAmount}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              生产成本：{{profit.yclcbAmount}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              次品：{{profit.ccpcpAmount}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              <span style="display: block; height: 22px;"></span>
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              其他收入：{{profit.cpqtAmount}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              合计：{{profit.cost}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              合计：{{profit.income}} 元
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid" style="width: 100%;">
            <p class="weui-grid__label total">
              利润：{{profit.profit}} 元
            </p>
          </a>
        </div>
      </div>
      <div class="charts" v-show="showChart">
        <div class="mark3">
          <p style="margin-bottom: 3px;">领料：<span class="total">{{profit.yclAmountweight}}吨</span></p>
          <template v-for="(item, index) in products">
            <p>{{item.name}}：<span class="total">{{item.value}}吨</span></p>
          </template>

        </div>

        <div class="weui-panel__bd">
          <RingChart :srdata="material" :srdata2="products2" :type="1" v-if="material.length > 0"></RingChart>
        </div>
      </div>
      <!--      <div class="charts" v-show="showChart">-->
      <!--        <div class="mark2">合计：<span class="total">{{profit.ccpAmountweight}}吨</span> <span class="total"> {{profit.income}}元</span></div>-->
      <!--        <div class="weui-panel__bd">-->
      <!--          <RingChart :srdata="products" :srdata2="products2" :type="2" v-if="products.length > 0"></RingChart>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="charts" v-show="showChart" style="padding-top: 2px;border-top: 2px solid #fff;">
        <div class="mark2">合计：<span class="total">{{profit.yclcbAmount}} 元</span></div>
        <div class="weui-panel__bd">
          <BarChart :firstcostKeys="firstcostKeys" :firstcostVals="firstcostVals" :type="1" v-if="firstcostVals.length > 0"></BarChart>
        </div>
      </div>
      <!--      <div class="fixbar" v-show="showChart">利润：<span>{{profit.profit}} 元</span></div>-->
    </div>
  </div>
</template>

<script>
  import BarChart from "./BarChart";
  import RingChart from "./RingChart";
  export default {
    name: 'CountProfit',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        rooms: [],
        departs: [],
        postData: {},
        strid: '',
        partid: '',
        material: [],
        material2: [],
        products: [],
        products2: [],
        firstcostKeys: [],
        firstcostVals: [],
        profit: {},
        codes: [],
        finishedCodes: [],
        showChart: false,
        id: '',
        room: '',
        depart: '',
        plandate: ''
      }
    },
    components: {BarChart, RingChart},
    created() {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })
    },
    mounted () {
      let that = this;

      this.id = this.$route.query.id;
      this.room = this.$route.query.room;
      this.depart = this.$route.query.depart;
      this.plandate = this.$route.query.plandate;
      this.getCountData();
      // this.getStoreRoom();
      // //日历初始化
      // $("#datetime-picker").calendar();
      // //日历赋初值
      // $("#datetime-picker").val(this.getDate(-1));
      // that.postData.plandate = this.$route.query.startdate;//$("#datetime-picker").val().replace(/\//g, '-');
      //
      // $('#datetime-picker').change(function () {
      //   that.postData.plandate = $(this).val().replace(/\//g, '-');
      //   that.getCountData();
      // })
    },
    watch: {
      // 'strid': function (val, oldval) {
      //   this.postData.strid = val;
      //   this.getCountData();
      // },
      // 'partid': function (val, oldval) {
      //   this.postData.partid = val;
      //   if (oldval == '') return;
      //   this.getCountData();
      // },
    },
    computed: {
    },
    methods: {
      getStoreRoom: function () {
        this.axios({
          method: 'get',
          url: '/produce/ProductionDaily!showProdWx.action',
          params: {funcType: 8} //lrj-0221修改，原来不传functype值
        }).then(response => {
          if (response.data.msg == 'success') {
            this.rooms = response.data.srs;
            //this.strid = response.data.srs[0].guid;
            this.departs = response.data.departs;
            //this.partid = response.data.departs[0].guid;
          } else if (response.data.msg == 'outlogin') {
            this.toastText('请重新登录');
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      getCountData: function () {
        this.axios({
          method: 'get',
          url: '/produce/ProductionDaily!getProdWx.action',
          params: {guid: this.id}
        }).then(response => {
          if (response.data.msg == 'success') {
            this.material = response.data.ycl.sort(this.sortData).map(this.filterData0);
            this.material2 = response.data.ycl2.sort(this.sortData).map(this.filterData1);
            this.products = response.data.ccp.sort(this.sortData).map(this.filterData4);
            this.products2 = response.data.ccp2.sort(this.sortData).map(this.filterData5);
            this.firstcostKeys = response.data.cb.map(this.filterData2);
            console.log()
            this.firstcostVals = response.data.cb.map(this.filterData3);
            this.profit = response.data.lr;

            //显示图表
            this.showChart = true;
          } else {
            //隐藏图表
            this.showChart = false;

            if (response.data.msg == 'not find Productiondaily') {
              this.toastText('没有数据');
            } else if (response.data.msg == 'outlogin') {
              this.toastText('请重新登录');
            } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
              //不不设置提示
            } else {
              this.toastError('系统错误');
            }
          }
        });
      },
      sortData: function(a, b) {
        return a.datatype < b.datatype;
      },
      sortData2: function(a, b) {
        return (a.product + ' ' + a.spename).localeCompare(b.product + ' ' + b.spename);
      },
      filterData0: function(item) {
        return {value: item.yclweightsum, name: this.toTypeName(item.datatype)}
      },
      filterData1: function(item) {
        return {value: item.yclweightsum, name: item.yclname}
      },
      filterData4: function(item) {
        if (item.datatype == 4 && item.specnames.length > 1) {

        }
        return {value: item.cpweight, name: this.toTypeName(item.datatype)}
      },
      filterData5: function(item) {
        if (item.datatype == 4) {
          return {value: item.cpweight, name: item.productname + ' ' + item.specname, datatype: item.datatype}
        } else {
          return {value: item.cpweight, name: this.toTypeName(item.datatype), datatype: item.datatype}
        }
      },
      filterData2: function(item) {
        // if (item.parmname1 == '直接人工') {
        //   return '人工';
        // } else if (item.parmname1 == '制造费用') {
        //   return '制造费';
        // } else if (item.parmname1 == '管理费用') {
        //   return '管理费';
        // } else {
        return item.parmname1;
        //}
      },
      filterData3: function(item) {
        //this.codes.push(item.product + ' ' + item.spename);
        return item.cbamountsum;
      },
      toTypeName: function (type) {
        let name = '';
        switch (type) {
          case 1:
            name = '原材料库';
            break;
          case 2:
            name = '成品库';
            break;
          case 3:
            name = '次品库';
            break;
          case 4:
            name = '成品';
            break;
          case 5:
            name = '次品';
            break;
          case 6:
            name = '报废';
            break;
          case 7:
            name = '损耗';
            break;
        }
        return name;
      },
      getDate: function (dayCount) {
        if(null == dayCount){
        }
        dayCount = 0;
        var dd = new Date();
        dd.setDate(dd.getDate()+dayCount);//设置日期
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;//获取当前月份的日期
        var d = dd.getDate();
        return y+"/"+m+"/"+d;
      }
    }
  }
</script>
